<template>
  <div class="detailes-page">
    <!-- 计算中 -->
    <div v-if="configStatus === 1" class="pubChunk">
      <span class="title"> 数据后台计算中，请稍后查看。。。。 </span>
    </div>
    <div v-else-if="configStatus === 2">
      <!-- 组合info -->
      <detail-header
        ref="detailHeader"
        :info.sync="info"
        :id.sync="id"
        :userId="userId"
        :realquery.sync="realquery"
        :startTime.sync="startTime"
        :endTime.sync="endTime"
        :oldDate.sync="oldDate"
        :warehouseAdjustmentCycle.sync="warehouseAdjustmentCycle"
        :more_chart1_nav_list2.sync="more_chart1_nav_list2"
      ></detail-header>
      <!-- 分类、指数、表单 -->
      <navForm
        ref="navForm"
        :info="info"
        :navActive.sync="navActive"
        :contrastOptObj.sync="contrastOptObj"
        :dataFrom.sync="dataFrom"
        :one_contrastOptions_list.sync="one_contrastOptions_list"
      ></navForm>
      <!-- 历史走势图 -->
      <lineEcahrts
        :info="info"
        :dataFrom="dataFrom"
        :userId="userId"
        :startTime="startTime"
        :endTime="endTime"
        :oldDate="oldDate"
        :id="id"
        :navActive="navActive"
        :realquery.sync="realquery"
        :warehouseAdjustmentCycle="warehouseAdjustmentCycle"
        :one_contrastOptions_list="one_contrastOptions_list"
        :more_chart1_nav_list2="more_chart1_nav_list2"
        :chart1List.sync="chart1List"
        @realContrastHnadle="realContrastHnadle"
        @clearRealquery="clearRealquery"
        @beyondIncome2Change="beyondIncome2ChangeHandle"
      ></lineEcahrts>
      <!-- 收益风险指标 -->
      <riskTable
        ref="riskTable"
        :id="id"
        :userId="userId"
        :navActive="navActive"
        :dataFrom="dataFrom"
        :startTime="startTime"
        :endTime="endTime"
        :contrastOptObj="contrastOptObj"
        :combTreeArr.sync="combTreeArr"
        :combTreeStrategyListArr.sync="combTreeStrategyListArr"
      ></riskTable>
        <!-- :chart1List="chart1List" -->
        <!-- :info="info" -->

      <!-- 收益图表 -->
        <!-- :info="info" -->
      <earnTable
        ref="earnTable"
        :id="id"
        :userId="userId"
        :navActive="navActive"
        :dataFrom="dataFrom"
        :startTime="startTime"
        :endTime="endTime"
        :chart1List="chart1List"
        :contrastOptObj="contrastOptObj"
        :combTree="combTreeArr"
        :combTreeStrategyList="combTreeStrategyListArr"
        :one_contrastOptions_list="one_contrastOptions_list"
      >
      </earnTable>
      <!-- 产品相关性 -->
      <relevanceTable
        :id="id"
        :userId="userId"
        :info="info"
        :navActive="navActive"
      ></relevanceTable>
      <!-- 历史净值 -->
      <netWorthTable
        :id="id"
        :userId="userId"
        :info="info"
        :navActive="navActive"
        :startTime="startTime"
        :endTime="endTime"
      ></netWorthTable>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import detailHeader from "./detail-header.vue";
import navForm from "./navForm.vue";
import lineEcahrts from "./lineEcahrts.vue";
import riskTable from "./riskTable.vue";
import earnTable from "./earnTable.vue";
import relevanceTable from "./relevanceTable.vue";
import netWorthTable from "./netWorthTable.vue";

import { getSaveConfigCompositionInfoStatus } from "@/api/combManage";

export default {
  name: "StrategyCombManageDetails",
  components: {
    detailHeader,
    navForm,
    riskTable,
    earnTable,
    lineEcahrts,
    netWorthTable,
    relevanceTable
  },
  computed: {
    ...mapGetters(["userId"])
  },
  data() {
    return {
      id: "", // 多开id
      info: {}, // 组合信息
      dataFrom: [], // 对比指数
      oldDate: [],
      navActive: 1, // 组合类型
      startTime: "",
      endTime: "",
      one_contrastOptions_list: [],
      combTreeStrategyListArr: [],
      more_chart1_nav_list2: [], // 年度
      contrastOptObj: {}, //对比指标
      chart1List: [],
      realquery: {}, // 实盘对比
      combTreeArr: [],
      t1: "",
      t1_num: 0,
      configStatus: 0,
      warehouseAdjustmentCycle: 1 // 1单利  1以外复利
    };
  },
  created() {
    this.getSaveConfig();
  },
  watch: {
    navActive: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.$refs.earnTable.earnTableInit(this.info)
        })
      }
    },
    info: {
      handler(newVal, oldVal) {
        if(this.chart1List.length) {
          this.$refs.riskTable.riskTableInit(this.chart1List,newVal)
        }
        this.$refs.earnTable.earnTableInit(newVal)
      }
    },
    chart1List: {
      handler(newVal, oldVal) {
        if(this.info.compositionName) {
          this.$refs.riskTable.riskTableInit(newVal,this.info)
        }
      }
    }
  },
  methods: {
    // 判断组合计算状态
    async getSaveConfig() {
      const compositionId = this.$route.params && this.$route.params.id; // 多开标签
      this.configStatus = await getSaveConfigCompositionInfoStatus(compositionId);
      if (this.configStatus === 2) {
        return
      }
      this.t1 = setInterval(async() => {
        this.configStatus =  await getSaveConfigCompositionInfoStatus(compositionId);
        this.t1_num++;
        if (this.t1_num >= 30 || this.configStatus === 2) {
          clearInterval(this.t1);
          this.t1_num = 0;
        }
      }, 1000);
    },
    realContrastHnadle() {
      this.$refs.detailHeader.realContrast()
    },
    clearRealquery(val) {
      this.realquery = val
    },
    beyondIncome2ChangeHandle(val) {
      this.$refs.navForm.indexType = [val, ...this.dataFrom]
    }
  }
};
</script>
<style scoped>
.detailes-page {
  padding: 20px;
  min-height: 100vh;
  background: #f0f2f5;
}
.title {
  padding: 20px;
  text-align: center;
  font-size: 26px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #262626;
}
</style>
